<script setup lang="ts">
import { ref, toRefs, computed, toRef } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";
import assets from "@/utils/assets";

let props = defineProps([
  "opts",
  "placeholder",
  "label",
  "value",
  "light",
  "isSlot",
]);
let emit = defineEmits(["update:value"]);
let { opts, placeholder, label, light, isSlot } = toRefs(props);

let valueRef = toRef(props, "value");

let handleFieldChange = (evt: any) => {
  let index = _.get(evt, "detail.value");
  let val = _.get(opts?.value, `[${index}].value`) || "";
  emit("update:value", val);
};

let fieldIndex = computed(() => {
  let index = _.findIndex(opts?.value, {
    value: valueRef.value,
  });
  return index;
});
</script>

<template>
  <div v-if="isSlot">
    <picker
      @change="handleFieldChange"
      :value="fieldIndex"
      :range="opts"
      range-key="name"
    >
      <slot></slot>
    </picker>
  </div>
  <div v-else class="form-item">
    <span :class="light ? 'name name-light' : 'name'">{{ label }}</span>
    <picker
      @change="handleFieldChange"
      :value="fieldIndex"
      :range="opts"
      range-key="name"
      class="picker-box"
    >
      <div class="picker-content">
        <view class="picker-name" v-if="_.get(opts, `[${fieldIndex}].name`)">{{
          _.get(opts, `[${fieldIndex}].name`)
        }}</view>
        <view v-else class="picker-name-empty"> {{ placeholder }} </view>
        <img :src="assets.arrow_right" class="arrow_right" />
      </div>
    </picker>
  </div>
</template>

<style lang="less" scoped>
.form-item {
  padding: 0 34rpx;
  padding-right: 0rpx;
  height: 112rpx;
  border-bottom: 1rpx solid #ededed;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.form-item:last-child {
  border-bottom: none;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  margin-right: 8rpx;
  white-space: nowrap;
}
.name-light {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
}
.picker-box {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30rpx;
  box-sizing: border-box;
}
.picker-content {
  min-width: 400rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.picker-name {
  height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  margin-right: 8rpx;
}
.picker-name-empty {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
  margin-right: 8rpx;
}
.arrow_right {
  width: 40rpx;
  height: 40rpx;
}
</style>
